<template>
  <view class="leaderboard-container">
    <!-- 顶部导航栏 -->
  
      <view class="nav-center">
      <text class="nav-title">储蓄排行榜</text>
    </view>
      
   
    
    <!-- 加载中 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在加载排行榜数据...</text>
    </view>
    
    <!-- 排行榜内容 -->
    <view v-else>
      <!-- 前三名展示区 -->
      <view class="top-three-container" v-if="leaderboardData.length >= 3">
        <!-- 第二名 -->
        <view class="rank-item rank-second">
          <view class="medal silver">🥈</view>
          <view class="user-avatar-container">
            <image :src="leaderboardData[1].avatar" class="user-avatar top-avatar" mode="aspectFill"></image>
          </view>
          <text class="user-name">{{ leaderboardData[1].nickname }}</text>
          <text class="user-savings">¥{{ leaderboardData[1].savingsAmount }}</text>
          <view class="ribbon">亚军</view>
        </view>

        <!-- 第一名 -->
        <view class="rank-item rank-first">
          <view class="medal gold">🥇</view>
          <view class="user-avatar-container">
            <image :src="leaderboardData[0].avatar" class="user-avatar top-avatar" mode="aspectFill"></image>
          </view>
          <text class="user-name">{{ leaderboardData[0].nickname }}</text>
          <text class="user-savings">¥{{ leaderboardData[0].savingsAmount }}</text>
          <view class="ribbon champion">冠军</view>
        </view>

        <!-- 第三名 -->
        <view class="rank-item rank-third">
          <view class="medal bronze">🥉</view>
          <view class="user-avatar-container">
            <image :src="leaderboardData[2].avatar" class="user-avatar top-avatar" mode="aspectFill"></image>
          </view>
          <text class="user-name">{{ leaderboardData[2].nickname }}</text>
          <text class="user-savings">¥{{ leaderboardData[2].savingsAmount }}</text>
          <view class="ribbon third">季军</view>
        </view>
      </view>
      
      <!-- 当没有足够的数据显示前三名时的简化展示 -->
      <view v-else-if="leaderboardData.length > 0" class="simplified-top-container" style="margin-top: 40rpx;">
        <view v-for="(item, index) in leaderboardData" :key="index" class="simplified-rank-item">
          <view class="simplified-medal" :class="getMedalClass(index)">{{ getMedalEmoji(index) }}</view>
          <image :src="item.avatar" class="user-avatar simplified-avatar" mode="aspectFill"></image>
          <text class="simplified-name">{{ item.nickname }}</text>
          <text class="simplified-savings">¥{{ item.savingsAmount }}</text>
        </view>
      </view>

      <!-- 完整排行榜列表，从第4名开始 -->
      <view class="rank-list-section" v-if="leaderboardData.length > 0">
        <view class="rank-list">
          <view class="rank-list-item" v-for="(item, index) in fullRankList" :key="index">
            <view class="rank-list-left">
              <text class="rank-list-number">{{ index + 4 }}</text>
              <image :src="item.avatar || ''" class="user-avatar list-avatar" mode="aspectFill" v-if="item.avatar"></image>
              <!-- 如果没有头像数据，显示默认图标 -->
              <view class="user-avatar list-avatar default-avatar" v-else>👤</view>
              <text class="rank-list-name">{{ item.nickname }}</text>
            </view>
            <view class="rank-list-right">
              <text class="rank-list-savings">¥{{ item.savingsAmount }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 自己的排名信息 -->
      <view class="self-rank-section" v-if="selfInfo">
        <text class="self-rank-title">{{ selfInfo.rank ? `第${selfInfo.rank}名` : '未上榜' }}</text>
        <view class="self-rank-item">
          <image :src="selfInfo.avatar" class="user-avatar self-avatar" mode="aspectFill"></image>
          <text class="self-rank-name">{{ selfInfo.nickname }}（我自己）</text>
          <text class="self-rank-savings">¥{{ selfInfo.savingsAmount }}</text>
        </view>
      </view>
      
      <!-- 没有数据时的提示 -->
      <view v-if="leaderboardData.length === 0 && !loading" class="empty-state">
        <view class="empty-icon">📊</view>
        <text class="empty-text">暂无排行榜数据</text>
        <text class="empty-hint">参与模拟器即可加入排名</text>
        <view class="empty-action" @click="goToSimulator">
          <text class="action-text">开始参与</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../config/api.js';

export default {
  data() {
    return {
      loading: true,
      leaderboardData: [], // 完整的排行榜数据
      selfInfo: null // 自己的排名信息
    };
  },
  computed: {
    // 计算属性：获取从第4名开始的排名列表
    fullRankList() {
      return this.leaderboardData.slice(3);
    }
  },
  onLoad() {
    // 页面加载时获取排行榜数据
    this.fetchLeaderboardData();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 根据排名获取奖牌表情
    getMedalEmoji(index) {
      if (index === 0) return '🥇';
      if (index === 1) return '🥈';
      if (index === 2) return '🥉';
      return '🏅';
    },
    
    // 根据排名获取奖牌样式类
    getMedalClass(index) {
      if (index === 0) return 'medal-gold';
      if (index === 1) return 'medal-silver';
      if (index === 2) return 'medal-bronze';
      return 'medal-other';
    },
    
    // 导航到模拟器页面
    goToSimulator() {
      uni.navigateTo({
        url: '/pages/simulator/risk-select'
      });
    },
    
    // 获取排行榜数据
    async fetchLeaderboardData() {
      this.loading = true;
      try {
        // 这里将从后端API获取数据，目前使用模拟数据
        // 实际项目中应该替换为真实的API调用
        const response = await this.getLeaderboardFromBackend();
        
        // 处理返回的数据
        this.leaderboardData = response.leaderboardData || [];
        this.selfInfo = response.selfInfo || null;
      } catch (error) {
        console.error('获取排行榜数据失败:', error);
        uni.showToast({
          title: '获取排行榜失败',
          icon: 'none'
        });
        
        // 不再使用模拟数据
        this.leaderboardData = [];
        this.selfInfo = null;
      } finally {
        this.loading = false;
      }
    },
    
    // 从后端获取数据的方法
    // 实际项目中应该替换为真实的API调用
    getLeaderboardFromBackend() {
      // 注释：实际项目中，这里应该是真实的API调用
      // 例如：
      // return uni.request({
      //   url: 'https://your-api.com/leaderboard',
      //   method: 'GET'
      // });
      
      // 修改为真实的API调用
      return new Promise((resolve, reject) => {
        // 获取存储的token
        const token = uni.getStorageSync('token');
        
        if (!token) {
          reject(new Error('未登录'));
          return;
        }
        
        uni.request({
          url: `${config.baseUrl}/api/rankings`,
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          },
          success: (res) => {
            if (res.statusCode === 200 && res.data) {
              const { top15, userRanking, userRank } = res.data;
              
              // 处理排行榜数据
              const leaderboardData = top15.map(user => ({
                userId: user.userId,
                nickname: user.nickname,
                savingsAmount: user.score,
                avatar: user.avatar
              }));
              
              // 处理自己的排名信息
              let selfInfo = null;
              if (userRanking) {
                selfInfo = {
                  userId: userRanking.userId,
                  nickname: userRanking.nickname,
                  savingsAmount: userRanking.score,
                  avatar: userRanking.avatar,
                  rank: userRank
                };
              }
              
              resolve({
                leaderboardData,
                selfInfo
              });
            } else {
              reject(new Error(res.data?.message || '获取数据失败'));
            }
          },
          fail: (err) => {
            reject(err);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
/* 主容器 */
.leaderboard-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #4facfe 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  padding-bottom: 40rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* 渐变动画 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  margin: 1rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.nav-left {
  width: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 返回按钮 */
.back-icon {
      font-size: 36rpx;
      color: #4facfe;
      font-weight: bold;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

.back-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
  z-index: -1;
}

.back-icon:active {
  transform: scale(0.9);
}

.back-icon:active::after {
  transform: translate(-50%, -50%) scale(1);
}

.nav-center {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  background: linear-gradient(90deg, #4facfe(255, 255, 255, 0.685), #00f2fe(255, 255, 255, 0.815), #4facfe(255,255,255,0.3));
}

.nav-title {
  display: block;
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 4rpx;
  align-content: center;
}

.nav-subtitle {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.nav-right {
  width: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-icon {
  font-size: 32rpx;
  color: #667eea;
  font-weight: bold;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(102, 126, 234, 0.1);
}

/* 标签页 */
.tab-container {
  display: flex;
  padding: 20rpx 40rpx;
  gap: 40rpx;
}

.tab-active {
  font-size: 32rpx;
  font-weight: bold;
  color: #8B4513;
  border-bottom: 4rpx solid #8B4513;
  padding-bottom: 10rpx;
}

.tab {
  font-size: 32rpx;
  color: #A0522D;
}

/* 加载中样式 */
    .loading-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 500rpx;
      gap: 40rpx;
    }
    
    /* 旋转加载图标 */
    .loading-spinner {
      width: 80rpx;
      height: 80rpx;
      border: 8rpx solid rgba(255, 255, 255, 0.3);
      border-top: 8rpx solid #FFF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      box-shadow: 0 0 30rpx rgba(255, 255, 255, 0.3);
    }
    
    /* 加载文字 */
    .loading-text {
      font-size: 32rpx;
      color: #FFF;
      font-weight: 600;
      animation: pulse 1.5s ease-in-out infinite;
      background: linear-gradient(135deg, #4facfe, #00f2fe);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    /* 旋转动画 */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* 脉冲动画 */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.05); }
    }
    
    /* 简化排行榜样式 */
    .simplified-top-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx;
      margin: 20rpx 30rpx;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 30rpx;
      backdrop-filter: blur(5rpx);
      gap: 20rpx;
    }
    
    .simplified-rank-item {
      display: flex;
      align-items: center;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 25rpx 30rpx;
      border-radius: 20rpx;
      box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .simplified-rank-item:active {
      transform: scale(0.98);
    }
    
    .simplified-medal {
      font-size: 40rpx;
      margin-right: 20rpx;
    }
    
    .medal-gold {
      color: #FFD700;
    }
    
    .medal-silver {
      color: #C0C0C0;
    }
    
    .medal-bronze {
      color: #CD7F32;
    }
    
    .medal-other {
      color: #666;
    }
    
    .simplified-name {
      flex: 1;
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .simplified-savings {
      font-size: 30rpx;
      font-weight: bold;
      color: #667eea;
    }
    
    /* 完整排行榜标题 */
.rank-list-section {
  margin-top: 30rpx;
  padding: 0 30rpx;
}

.rank-list-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 20rpx;
  background: rgba(255, 255, 255, 0.1);
  padding: 15rpx 20rpx;
  border-radius: 15rpx;
  display: inline-block;
  backdrop-filter: blur(5rpx);
  opacity: 0;
  transform: translateX(-20rpx);
  animation: slideRight 0.6s ease-out forwards 0.3s;
}
    
    /* 空状态样式 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 500rpx;
      gap: 30rpx;
      padding: 40rpx;
      text-align: center;
      opacity: 0;
      animation: fadeIn 0.6s ease-out forwards;
    }
    
    .empty-icon {
      font-size: 120rpx;
      animation: bounce 2s ease-in-out infinite;
    }
    
    .empty-text {
      font-size: 34rpx;
      font-weight: 600;
      color: #FFF;
      margin-bottom: 10rpx;
    }
    
    .empty-hint {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.5;
    }
    
    .empty-action {
      margin-top: 20rpx;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      padding: 15rpx 60rpx;
      border-radius: 40rpx;
      box-shadow: 0 10rpx 30rpx rgba(79, 172, 254, 0.4);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .empty-action:active {
      transform: scale(0.95);
      box-shadow: 0 5rpx 20rpx rgba(102, 126, 234, 0.3);
    }
    
    .action-text {
      font-size: 28rpx;
      font-weight: 600;
      color: #FFF;
    }
    
    /* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 上滑动画 */
@keyframes slideUp {
  from {
    transform: translateY(30rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 右滑动画 */
@keyframes slideRight {
  from {
    transform: translateX(-20rpx);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 闪光动画 */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
    
    /* 弹跳动画 */
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-20rpx);
      }
      60% {
        transform: translateY(-10rpx);
      }
    }

/* 前三名容器 */
.top-three-container {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  gap: 20rpx;
  margin: 40rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 30rpx;
  backdrop-filter: blur(5rpx);
  opacity: 0;
  transform: translateY(30rpx);
  animation: slideUp 0.8s ease-out forwards;
}

/* 前三名通用样式 */
.rank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border-radius: 25rpx;
  position: relative;
  flex: 1;
  min-height: 300rpx;
  justify-content: center;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
}

.rank-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: all 0.4s ease;
}

.rank-item:active::before {
  transform: scale(1);
  opacity: 1;
}

.rank-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rpx;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.685), rgba(255, 255, 255, 0.815), rgba(255,255,255,0.3));
}

.rank-item:active {
  transform: scale(0.98);
}

/* 第一名样式 */
.rank-first {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  transform: translateY(-20rpx) scale(1.05);
  z-index: 3;
}

/* 第二名样式 */
.rank-second {
  background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  z-index: 2;
}

/* 第三名样式 */
.rank-third {
  background: linear-gradient(135deg, #ffbb77, #ffd8bc);
  z-index: 1;
}

/* 奖牌样式 */
.medal {
  font-size: 70rpx;
  margin-bottom: 15rpx;
  animation: pulse 2s infinite;
}

.gold {
  color: #FFF;
  text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
}

.silver {
  color: #FFF;
  text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
}

.bronze {
  color: #FFF;
  text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
}

/* 丝带样式 */
.ribbon {
  position: absolute;
  top: 0;
  right: -20rpx;
  transform: rotate(45deg);
  width: 120rpx;
  text-align: center;
  padding: 5rpx 0;
  font-size: 20rpx;
  font-weight: bold;
  color: #FFF;
  z-index: 10;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
}

.ribbon.champion {
  background-color: #FF6B6B;
}

.ribbon {
  background-color: #4ECDC4;
}

.ribbon.third {
  background-color: #FFD166;
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 用户头像容器 */
.user-avatar-container {
  margin: 10rpx 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 用户头像通用样式 */
.user-avatar {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 前三名头像样式 */
.top-avatar {
  width: 140rpx;
  height: 140rpx;
  border: 6rpx solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
  animation: avatarFloat 3s ease-in-out infinite;
}

@keyframes avatarFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10rpx) scale(1.05);
  }
}

/* 简化排行榜样式 */
.simplified-avatar {
  width: 70rpx;
  height: 70rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.8);
  margin-right: 20rpx;
}

/* 列表头像样式 */
.list-avatar {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid rgba(102, 126, 234, 0.3);
  margin-right: 20rpx;
  flex-shrink: 0;
}

/* 自己排名头像样式 */
.self-avatar {
  width: 80rpx;
  height: 80rpx;
  border: 4rpx solid #4facfe;
  margin-right: 20rpx;
  flex-shrink: 0;
}

/* 用户名称 */
.user-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #FFF;
  margin: 10rpx 0;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 0 10rpx;
  word-break: break-all;
  max-width: 200rpx;
}

/* 用户储蓄金额 */
.user-savings {
      font-size: 36rpx;
      font-weight: 800;
      color: #FFF;
      margin-top: 10rpx;
      text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
      background: rgba(0, 0, 0, 0.2);
      padding: 8rpx 20rpx;
      border-radius: 40rpx;
      backdrop-filter: blur(5rpx);
    }
    
    /* 前三名储蓄金额特殊样式，提高可读性 */
    .rank-first .user-savings {
      color: #FFF;
      background: rgba(0, 0, 0, 0.3);
      padding: 10rpx 25rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.5);
      font-size: 40rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }
    
    .rank-second .user-savings {
      color: #FFF;
      background: rgba(0, 0, 0, 0.3);
      padding: 10rpx 25rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.5);
      font-size: 38rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }
    
    .rank-third .user-savings {
      color: #FFF;
      background: rgba(0, 0, 0, 0.3);
      padding: 10rpx 25rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.5);
      font-size: 36rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }

/* 4-6名列表 */
.rank-list {
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards 0.5s;
}

/* 列表项 */
.rank-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  padding: 25rpx 30rpx;
  margin-bottom: 15rpx;
  transition: all 0.3s ease;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transform: translateX(-20rpx);
  animation: slideRight 0.5s ease-out forwards;
}

.rank-list-item::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 10rpx;
      height: 100%;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

.rank-list-item:active {
  transform: scale(0.98) translateX(0);
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.15);
}

.rank-list-item:active::after {
  transform: translateX(0);
}

/* 为每个列表项添加不同的动画延迟 */
.rank-list-item:nth-child(1) { animation-delay: 0.6s; }
.rank-list-item:nth-child(2) { animation-delay: 0.7s; }
.rank-list-item:nth-child(3) { animation-delay: 0.8s; }
.rank-list-item:nth-child(4) { animation-delay: 0.9s; }
.rank-list-item:nth-child(5) { animation-delay: 1.0s; }
.rank-list-item:nth-child(6) { animation-delay: 1.1s; }
.rank-list-item:nth-child(7) { animation-delay: 1.2s; }
.rank-list-item:nth-child(8) { animation-delay: 1.3s; }
.rank-list-item:nth-child(9) { animation-delay: 1.4s; }
.rank-list-item:nth-child(10) { animation-delay: 1.5s; }

/* 列表项左侧 */
.rank-list-left {
  display: flex;
  align-items: center;
  gap: 25rpx;
  flex: 1;
}

.rank-list-item:active .list-avatar {
  transform: scale(0.9);
}

/* 列表排名数字 */
.rank-list-number {
  font-size: 28rpx;
  font-weight: 700;
  color: #667eea;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 50%;
}

/* 默认头像样式 */
.default-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2rpx solid rgba(102, 126, 234, 0.3);
}

/* 列表名称 */
.rank-list-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
}

/* 列表项右侧 */
.rank-list-right {
  display: flex;
  align-items: center;
}

/* 列表储蓄金额 */
.rank-list-savings {
      font-size: 32rpx;
      font-weight: 700;
      color: #4facfe;
      background: linear-gradient(135deg, #ff9a9e, #fecfef);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      padding: 8rpx 16rpx;
      border-radius: 15rpx;
      backdrop-filter: blur(5rpx);
      text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
    }

/* 自己排名区域 */
.self-rank-section {
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2));
  border-radius: 25rpx;
  backdrop-filter: blur(5rpx);
  border: 1rpx solid rgba(79, 172, 254, 0.3);
  opacity: 0;
  transform: translateY(20rpx);
  animation: slideUp 0.7s ease-out forwards 1.6s;
  position: relative;
  overflow: hidden;
}

.self-rank-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rpx;
  background: linear-gradient(90deg, #4facfe, #00f2fe, #00f2fe);
  animation: shimmer 2s infinite linear;
}

/* 自己排名标题 */
.self-rank-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
  display: inline-block;
}

/* 自己排名项 */
.self-rank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  padding: 30rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  border-left: 10rpx solid #4facfe;
}

.self-rank-item:active .self-avatar {
  transform: scale(0.9);
}

/* 自己排名名称 */
.self-rank-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
}

.self-rank-name::after {
  content: '⭐';
  margin-left: 10rpx;
  font-size: 24rpx;
}

/* 自己排名储蓄金额 */
.self-rank-savings {
      font-size: 36rpx;
      font-weight: 800;
      color: #667eea;
      padding: 10rpx 20rpx;
      border-radius: 15rpx;
      text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
      box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
    }
</style>